import React, { Component } from 'react';
import {Spin,Label} from 'iftide';
import {
    TouchableOpacity,
    StyleSheet,
    View,
} from 'react-native';

export default class Spin_Demo extends Component {
    constructor() {
        super();
        this.state = {
            visible: false,
        };
    };

    onClick(type){
        switch (type) {
            case 'type1':
                this.setState({
                    visible: true
                });
                setTimeout(() => this.setState({
                    visible: false
                }), 2000);
                break;
            case 'type2':
                let spin = Spin.show({
                    text: 'type2',
                });
                setTimeout(() => Spin.hide(spin), 2000);
                break;
        }

    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={{padding: 10}}
                    onPress={() => this.onClick('type1')}>
                    <Label text={'Spin标签方式'} type={'title'}></Label>
                </TouchableOpacity>
                <Spin visible={this.state.visible} hasMask={true}/>

                <TouchableOpacity
                style={{padding: 10}}
                onPress={() => this.onClick('type2')}>
                <Label text={'Spin函数方式'} type={'title'}></Label>
            </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});